<template>
    <div class="MemberEdit">
        <el-drawer v-model="store.state.MemberInfo.drawer">
            <template #header>
                <h4>修改会员信息</h4>
            </template>
            <template #default>
                <div>
                    <el-form ref="ruleFormRef" :model="store.state.MemberInfo.editFrom" status-icon :rules="rules"
                        label-width="120px" class="demo-ruleForm">
                        <el-form-item label="会员信息" prop="Meminfo">
                            <el-input v-model.trim="store.state.MemberInfo.editFrom.Meminfo" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="余额" prop="MemPrice">
                            <el-input v-model.trim="store.state.MemberInfo.editFrom.MemPrice" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="消费金额" prop="CostPrice">
                            <el-input v-model.trim="store.state.MemberInfo.editFrom.CostPrice" />
                        </el-form-item>
                        <el-form-item label="最后登录时间" prop="LastTime">
                            <el-date-picker v-model="store.state.MemberInfo.editFrom.LastTime" type="datetime"
                                placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss"
                                value-format="YYYY-MM-DD hh:mm:ss a" />
                        </el-form-item>
                        <el-form-item label="注册时间" prop="RegTime">
                            <el-date-picker v-model="store.state.MemberInfo.editFrom.RegTime" type="datetime"
                                placeholder="Pick a Date" format="YYYY/MM/DD hh:mm:ss"
                                value-format="YYYY-MM-DD hh:mm:ss a" />
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelClick">取消</el-button>
                    <el-button type="primary" @click="confirmClick">确认</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits } from 'vue'
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import http from '../util/api'

const ruleFormRef = ref<FormInstance>()
const store = useStore()
const ruleForm = reactive<any>({
    Meminfo: '',
    MemPrice: '',
    CostPrice: '',
    LastTime: '',
    RegTime: ''
})

const rules = reactive<FormRules>({
    Meminfo: [{ required: true, message: "请输入会员信息", trigger: 'blur' }],
    MemPrice: [{ required: true, message: "请输入会员金额", trigger: 'blur' }],
    CostPrice: [{ required: true, message: "请输入会员消费金额", trigger: 'blur' }],
    LastTime: [{ required: true, message: "请输入会员最后登录时间", trigger: 'blur' }],
    RegTime: [{ required: true, message: "请输入会员注册时间", trigger: 'blur' }],
})


const cancelClick = () => {
    store.commit('setDrawer')
}

const emit = defineEmits(['getNewMemberInfo'])

// 确认编辑递交会员信息
const confirmClick = () => {
    console.log('确认修改');
    http(`/members/${store.state.MemberInfo.editFrom.id}`, 'put', store.state.MemberInfo.editFrom).then((res: any) => {
        console.log(res);
        if (res.status === 200) {
            ElMessage.success('会员信息修改成功')
            emit('getNewMemberInfo')
        } else {
            ElMessage.error('会员信息修改失败')
        }

    })
    store.commit('setDrawer')
}

</script>

<style lang="scss" scoped></style>